document.addEventListener('DOMContentLoaded', () => {
    // Inject CSS for shine effect
    const style = document.createElement('style');
    style.textContent = `
        .card-shine {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 16px;
            pointer-events: none;
            z-index: 5;
            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%);
            mix-blend-mode: overlay;
        }
        .tool-content-wrapper {
            transform-style: preserve-3d;
            will-change: transform;
        }
    `;
    document.head.appendChild(style);

    // Initialize tilt effect for existing cards
    // Note: Since cards might be dynamically generated (though in index.html they seem to be generated by JS on load),
    // we should wait for them or use mutation observer. 
    // Looking at index.html, it uses createToolCard() but the script calling it is at the end of body.
    // So DOMContentLoaded should work if we put this script at the end of body too.
    
    // However, index.html generates cards via JS. We need to make sure we attach listeners AFTER they are generated.
    // A safe bet is to use MutationObserver on the timeline track, or just poll/wait.
    // Better yet, expose a function `initCardTilt(element)` and call it when creating cards.
    // But to be non-intrusive, I'll use a MutationObserver on the timeline track.

    const timelineTrack = document.getElementById('timelineTrack');
    if (timelineTrack) {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeType === 1 && node.classList.contains('tool-section')) {
                        const card = node.querySelector('.tool-content-wrapper');
                        if (card) initTilt(card);
                    }
                });
            });
        });
        
        observer.observe(timelineTrack, { childList: true });
        
        // Also init any existing ones
        document.querySelectorAll('.tool-content-wrapper').forEach(initTilt);
    }
});

function initTilt(card) {
    if (card.dataset.tiltInitialized) return;
    card.dataset.tiltInitialized = 'true';

    // Add shine element
    const shine = document.createElement('div');
    shine.className = 'card-shine';
    card.appendChild(shine);

    // Original transition
    const originalTransition = card.style.transition || getComputedStyle(card).transition;

    card.addEventListener('mousemove', (e) => {
        // Disable transition during movement for instant response
        card.style.transition = 'none';

        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        
        // Calculate rotation
        // Limit max rotation to 10 degrees
        const rotateX = ((y - centerY) / centerY) * -10; 
        const rotateY = ((x - centerX) / centerX) * 10;
        
        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
        
        // Update shine
        const percentX = (x / rect.width) * 100;
        const percentY = (y / rect.height) * 100;
        // Adjust shine opacity based on theme
        const isDark = document.body.classList.contains('dark-theme');
        const shineOpacity = isDark ? 0.15 : 0.4;
        
        shine.style.background = `radial-gradient(circle at ${percentX}% ${percentY}%, rgba(255,255,255,${shineOpacity}) 0%, rgba(255,255,255,0) 80%)`;
    });

    card.addEventListener('mouseleave', () => {
        // Re-enable transition for smooth reset
        card.style.transition = 'transform 0.5s ease, box-shadow 0.3s ease'; // Match original CSS slightly but smoother
        card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
        shine.style.background = 'none';
    });
}
